<template>
  <div class="state_tag">
    <div
        class="dot"
        :style="{
        backgroundColor: stateColor,
        width: doWidth,
        height: doWidth,
      }"
    ></div>
    <div :style="{ color: stateColor, fontSize: fontSize + 'px' }">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import {PropType, computed} from 'vue'

defineOptions({
  name: 'StateTag',
})

type Statetypes = 'link' | 'danger' | 'warning' | 'success' | 'middle'
const props = defineProps({
  type: {
    type: String as PropType<Statetypes>,
    default: 'success',
  },
  fontSize: {
    type: Number,
    default: 14,
  },
})
const colorList = {
  link: '#3f90f7',
  danger: '#ed5b57',
  warning: '#f7ba2a',
  success: '#4c9e6e',
  middle: '#999999',
}

const stateColor = computed(() => {
  return colorList[props.type]
})

const doWidth = computed(() => {
  return props.fontSize * 0.7 + 'px'
})
</script>
<style lang="scss" scoped>
.state_tag {
  display: flex;
  align-items: center;

  .dot {
    border-radius: 50%;
    margin-right: 4px;
  }
}

</style>
